import React, { useEffect, useRef } from 'react';
import styles from './index.less';
interface Props {}
const LoginCom: React.FC<Props> = (props) => {
  const {} = props;
  const ref = useRef<HTMLDivElement>();
  const register = () => {
    ref.current?.classList.remove(styles.re_active);
    ref.current?.classList.add(styles.active);
  };
  const login = () => {
    ref.current?.classList.remove(styles.active);
    ref.current?.classList.add(styles.re_active);
  };
  const submit = (e) => {
    e.preventDefault();
    const data = getFormData(e.target);
    console.log('data', data);
  };
  const submit1 = (e) => {
    e.preventDefault();
    const data = getFormData(e.target);
    console.log('data', data);
  };

  const listenError = (inputs) => {
    inputs.forEach((input) => {
      input.addEventListener('input', () => {
        input.classList.remove(styles.error);
      });
    });
  };
  // 封装表单数据的函数
  function getFormData(form) {
    const formData = {};
    // 循环遍历表单元素
    for (let i = 0; i < form.elements.length; i++) {
      const element = form.elements[i];
      // 如果元素有 name 属性并且不是按钮或提交类型，则将其值存储到 formData 对象中
      if (
        element.name &&
        element.type !== 'button' &&
        element.type !== 'submit'
      ) {
        formData[element.name] = element.value;
        if (element.value == '') {
          element.classList.add(styles.error);
        } else {
          element.classList.remove(styles.error);
        }
      }
    }

    return formData;
  }
  useEffect(() => {
    const inputs = document.querySelectorAll('input');
    listenError(inputs);
  }, []);
  return (
    <div className={styles.container}>
      <div ref={ref} className={[styles.login_wrap].join(' ')}>
        <div className={styles.loginOrReigsterWrap}>
          <div className={styles.form_box}>
            <div className={styles.log_wrap}>
              <h2
                style={{ '--i': 1 } as any}
                className={[styles.title, styles.animate].join(' ')}
              >
                登录
              </h2>
              <form noValidate={true} onSubmit={submit} id="myForm">
                <div
                  style={{ '--i': 2 } as any}
                  className={[styles.input_box, styles.animate].join(' ')}
                >
                  <input type="text" id="username" name="username" required />
                  <label htmlFor="username">请输入用户名</label>
                  <i>图</i>
                </div>
                <div
                  style={{ '--i': 3 } as any}
                  className={[styles.input_box, styles.animate].join(' ')}
                >
                  <input
                    type="password"
                    id="password"
                    name="password"
                    required
                  />
                  <label htmlFor="password">请输入密码</label>
                  <i>图</i>
                </div>
                <button
                  type="submit"
                  style={{ '--i': 4 } as any}
                  className={styles.btn + ' ' + styles.animate}
                >
                  登录
                </button>
                <div
                  style={{ '--i': 5 } as any}
                  className={[styles.bottom, styles.animate].join(' ')}
                >
                  如果没有账号?
                  <span className={styles.login_font} onClick={register}>
                    去注册
                  </span>
                </div>
              </form>
            </div>
          </div>
          <div className={styles.form_box1}>
            <div className="log_wrap">
              <h2
                style={{ '--i': 1 } as any}
                className={[styles.title, styles.animate1].join(' ')}
              >
                注册
              </h2>
              <form noValidate={true} onSubmit={submit1} id="myForm1">
                <div
                  style={{ '--i': 2 } as any}
                  className={[styles.input_box, styles.animate1].join(' ')}
                >
                  <input type="text" name="username" required />
                  <label>请输入用户名</label>
                  <i>图</i>
                </div>
                <div
                  style={{ '--i': 3 } as any}
                  className={[styles.input_box, styles.animate1].join(' ')}
                >
                  <input type="text" name="email" required />
                  <label>请输入邮箱</label>
                  <i>图</i>
                </div>
                <div
                  style={{ '--i': 4 } as any}
                  className={[styles.input_box, styles.animate1].join(' ')}
                >
                  <input type="password" name="password" required />
                  <label>请输入密码</label>
                  <i>图</i>
                </div>
                <button
                  type="submit"
                  style={{ '--i': 5 } as any}
                  className={styles.btn + ' ' + styles.animate1}
                >
                  注册
                </button>
                <div
                  style={{ '--i': 6 } as any}
                  className={[styles.bottom, styles.animate1].join(' ')}
                >
                  已经有账号了?
                  <span className={styles.login_font} onClick={login}>
                    去登录
                  </span>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div className={styles.block}></div>
        <div className={styles.block1}></div>
      </div>
    </div>
  );
};
export default LoginCom;
